<template>
  <div class="doctor">
    <el-card class="box-card">
      <div class="boxcard-head">
        <el-form :model="queryParam" ref="queryParam" inline class="demo-form-inline">
          <!-- <el-form-item>
            <el-button icon="el-icon-plus" type="primary" @click="dialogAdd()">新增</el-button>
          </el-form-item>-->
          <el-form-item label="医生名称" prop="name">
            <el-input v-model="queryParam.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phoneNumber">
            <el-input v-model="queryParam.phoneNumber" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item style="flex: 1;" label="医院" prop="hospitialId">
            <el-select v-model="queryParam.hospitialId" filterable placeholder="请选择">
              <el-option
                v-for="item in hospitalList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="flex: 1;" label="状态" prop="status">
            <el-select v-model="queryParam.status" filterable placeholder="请选择">
              <el-option key="1" label="正常合作" value="1"></el-option>
              <el-option key="2" label="终止合作" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button class="look_btn" type="primary" @click="getList()">查询</el-button>
            <el-button @click="resetForm('queryParam')">重置</el-button>
            <el-button icon="el-icon-plus" type="primary" @click="dialogAdd()">新增</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="boxcard-body">
        <el-table
          :data="list"
          style="width: 100%;"
          row-key="id"
          :header-cell-style="{ 'background-color': '#EEEEEE' }"
        >
          <el-table-column type="index" label="排序" width="60"></el-table-column>
          <el-table-column prop="imageUrl" label="头像" width="100">
            <template slot-scope="scope">
              <img :src="scope.row.imageUrl" width="60" height="60" />
            </template>
          </el-table-column>
          <el-table-column prop="name" label="名称" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="phoneNumber" label="手机" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="hospitalName" label="医院名称" width="200" show-overflow-tooltip></el-table-column>
          <el-table-column prop="postName" label="职务" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="departmentName" label="科室" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="status" label="状态" width="150" show-overflow-tooltip>
            <template slot-scope="scope">{{ scope.row.status === 1 ? '正常合作' : '终止合作' }}</template>
          </el-table-column>
          <el-table-column prop="isHot" label="是否首页" width="150" show-overflow-tooltip>
            <template slot-scope="scope">{{ scope.row.isHot ? '是' : '否' }}</template>
          </el-table-column>
          <el-table-column prop="recommendNum" label="总宣传数" width="60" show-overflow-tooltip></el-table-column>
          <el-table-column
            prop="totalDistributeFee"
            label="累计分销费"
            width="100"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column prop="totalReplyFee" label="累计咨询费" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="amount" label="余额" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="commentTimes" label="咨询评价次数" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="goodRate" label="咨询评价好评率" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="操作" fixed="right" width="240">
            <template slot-scope="scope">
              <el-button @click="dialogField(scope.row)" type="text" size="small">编辑</el-button>
              <el-button
                @click="changeStatus(scope.row)"
                type="text"
                size="small"
              >{{ scope.row.status === 1 ? '终止合作' : '正常合作' }}</el-button>
              <el-button @click="dialogIncomeFlowOpen(scope.row)" type="text" size="small">收益流水</el-button>
              <el-button type="text" size="small" @click="recommenderDialog(scope.row)">宣传人</el-button>
              <el-button
                type="text"
                size="small"
                @click="hot(scope.row)"
              >{{scope.row.isHot?'下首页':'上首页'}}</el-button>
              <el-button @click="dialogDelete(scope.row)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pagination">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="pageChange"
            :total="total"
            :current-page.sync="pageNum"
            :page-sizes="[10, 20]"
            :page-size="10"
            layout="total, sizes, prev, pager, next"
          ></el-pagination>
        </div>
      </div>
    </el-card>
    <!-- 弹窗 -->
    <div>
      <el-dialog
        :title="editName"
        :visible.sync="dialogFieldBox"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :show-close="false"
        width="60%"
      >
        <el-form
          :model="doctor"
          :rules="rules"
          label-position="right"
          label-width="100px"
          ref="form"
        >
          <el-form-item label="头像" prop="imageUrl">
            <singleImgUpload :url="doctor.imageUrl" dir="doctor" @setUrl="setUrl"></singleImgUpload>
          </el-form-item>
          <div class="formItem">
            <el-form-item style="flex: 1;" label="名称" prop="name">
              <el-input v-model="doctor.name" />
            </el-form-item>
            <el-form-item style="flex: 1;" label="性别" prop="sex">
              <el-radio-group v-model="doctor.sex">
                <el-radio :label="1">男</el-radio>
                <el-radio :label="0">女</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <!-- <div class="formItem"> -->
          <el-row>
            <el-col :span="12">
              <el-form-item label="手机" prop="phoneNumber">
                <el-input v-model="doctor.phoneNumber" @blur="getUserByPhoneNum" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-alert
                v-if="phoneNumberTips"
                :title="phoneNumberTips"
                type="warning"
                :closable="false"
              ></el-alert>
            </el-col>
          </el-row>

          <!-- <label>{{phoneNumberTips}}</label> -->
          <!-- </div> -->
          <div class="formItem">
            <el-form-item style="flex: 1;" label="密码" prop="password">
              <el-input v-model="doctor.password" />
            </el-form-item>
          </div>
          <div class="formItem">
            <el-form-item style="flex: 1;" label="出生日期" prop="birthday">
              <el-date-picker
                v-model="doctor.birthday"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
            </el-form-item>
            <el-form-item style="flex: 1;" label="医院" prop="hospitialId">
              <el-select v-model="doctor.hospitialId" filterable placeholder="请选择">
                <el-option
                  v-for="item in hospitalList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="formItem">
            <el-form-item style="flex: 1;" label="科室" prop="departmentId">
              <el-select v-model="doctor.departmentId" filterable placeholder="请选择">
                <el-option
                  v-for="item in hospitalDepartments"
                  :key="item.key"
                  :label="item.label"
                  :value="item.key"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="flex: 1;" label="职称" prop="postId">
              <el-select v-model="doctor.postId" filterable placeholder="请选择">
                <el-option
                  v-for="item in hospitalPosts"
                  :key="item.key"
                  :label="item.label"
                  :value="item.key"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="formItem">
            <el-form-item style="flex: 1;" label="咨询价格" prop="price">
              <el-input v-model="doctor.price" type="number" />
            </el-form-item>
            <el-form-item style="flex: 1;" label="分销提成比例" prop="distributeFeeRule">
              <el-input v-model="doctor.distributeFeeRule" type="number" max="1" min="0" />
            </el-form-item>
          </div>
          <div class="formItem">
            <el-form-item style="flex: 1;" label="咨询提成比例" prop="replyFeeRule">
              <el-input v-model="doctor.replyFeeRule" type="number" max="1" min="0" />
            </el-form-item>
            <el-form-item style="flex: 1;" label="擅长科目" prop="skillSubjectIds">
              <el-select v-model="doctor.skillSubjectIds" multiple placeholder="请选择">
                <el-option
                  v-for="item in skillSubjects"
                  :key="item.key"
                  :label="item.label"
                  :value="item.key"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
          <el-form-item label="介绍" prop="memo">
            <el-input type="textarea" :rows="3" v-model="doctor.memo" />
          </el-form-item>
          <el-form-item label="擅长" prop="goodAt">
            <el-input type="textarea" :rows="3" v-model="doctor.goodAt" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelClick">取 消</el-button>
          <el-button type="primary" @click="confirmClick">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <incomeFlow v-bind:visible.sync="dialogIncomeFlow" ref="incomeFlow"></incomeFlow>
    <recommender v-bind:visible.sync="recommenderVisable" ref="recommender"></recommender>
  </div>
</template>

<script>
import { get, postJson, postXform } from "@/utils/request.js";
import singleImgUpload from "../../components/upload/SingleFileUpload.vue";
import incomeFlow from "./incomeFlow.vue";
import recommender from "../market/recommender";

export default {
  components: { singleImgUpload, incomeFlow, recommender },
  data() {
    return {
      queryParam: {
        name: null,
        phoneNumber: null,
        status: null,
        hospitialId: null
      },
      // 分页参数
      pageNum: 1, // 当前页数
      pageSize: 10, // 页大小
      total: 0, // 数据总条数
      list: [], // 数据列表
      // 弹窗相关属性
      editName: "编辑",
      dialogFieldBox: false,
      // 弹窗数据
      doctor: {
        id: null,
        name: null,
        sex: null,
        birthday: null,
        phoneNumber: null,
        imageUrl: null,
        memo: null,
        hospitialId: null,
        postId: null,
        departmentId: null,
        price: null,
        distributeFeeRule: null,
        replyFeeRule: null,
        password: null,
        skillSubjectIds: [],
        goodAt:null
      },
      phoneNumberTips: "",
      // 表单校验
      rules: {
        name: [
          {
            required: true,
            message: "名称不能为空",
            trigger: "blur"
          }
        ],
        phoneNumber: {
          required: false,
          validator: (rule, value, callback) => {
            if (!value) {
              callback();
            }
            if (
              value !== "" &&
              !/^0?(13[0-9]|15[012356789]|17[013678]|18[0-9]|14[57])[0-9]{8}$/.test(
                value
              )
            ) {
              callback("手机号格式不正确！");
            } else {
              callback();
            }
          },
          trigger: "blur"
        },
        price: [
          {
            required: true,
            message: "咨询价格不能为空",
            trigger: "blur"
          }
        ],
        distributeFeeRule: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback("分销提成比例不能为空");
              }
              if (value > 1) {
                callback("分销提成比例不能大于1");
              }
              callback();
            },
            trigger: "blur"
          }
        ],
        replyFeeRule: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback("咨询提成比例不能为空");
              }
              if (value > 1) {
                callback("咨询提成比例不能大于1");
              }
              callback();
            },
            trigger: "blur"
          }
        ]
      },
      // 数据字典
      hospitalList: [],
      hospitalDepartments: [],
      hospitalPosts: [],
      skillSubjects: [],
      id: null,
      dialogIncomeFlow: false,
      recommenderVisable: false,
      idRecommender: ""
    };
  },
  created() {
    this.ininDict();
    this.getList(this.pageNum, this.pageSize);
  },
  watch: {
    dialogFieldBox: {
      handler() {
        if (!this.dialogFieldBox) {
          this.doctor.imageUrl = "";
        }
      },
      immediate: true
    }
  },
  methods: {
    ininDict() {
      get("doctor/hospitalSelectOption").then(res => {
        this.hospitalList = res.data.data;
      });
      get("dict/hospitalDepartment").then(res => {
        this.hospitalDepartments = res.data.data;
      });
      get("dict/hospitalTitle").then(res => {
        this.hospitalPosts = res.data.data;
      });
      get("dict/consultSubject").then(res => {
        this.skillSubjects = res.data.data;
      });
    },
    // 分页相关方法
    // 页大小改变时
    handleSizeChange(val) {
      this.pageSize = val;
    },
    // 页码改变时
    pageChange(e) {
      // 获取某页数据
      this.pageNum = e;
      this.getList();
    },
    // 获取列表数据
    getList(num, size) {
      this.$https
        .get("/doctor/pageDoctor", {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          name: this.queryParam.name,
          hospitialId: this.queryParam.hospitialId,
          status: this.queryParam.status,
          phoneNumber: this.queryParam.phoneNumber
        })
        .then(res => {
          this.list = res.data.data.list;
          this.total = Number.parseInt(res.data.data.total);
          this.pageNum = res.data.data.pageNum;
        });
    },
    changeStatus(row) {
      let url =
        row.status === 1 ? "/doctor/stopDoctor" : "/doctor/normalDoctor";
      postXform(url, { id: row.id }).then(res => {
        this.$message({ message: "操作成功", type: "success" });
        this.getList();
      });
    },
    resetFormData() {
      return {
        id: null,
        name: null,
        sex: null,
        birthday: null,
        phoneNumber: null,
        imageUrl: null,
        memo: null,
        hospitialId: null,
        postId: null,
        departmentId: null,
        price: null,
        distributeFeeRule: null,
        replyFeeRule: null,
        password: null,
        skillSubjectIds: [],
        goodAt:null,
      };
    },
    resetForm(formName) {
      if (this.$refs[formName]) {
        this.$refs[formName].resetFields();
        if (formName == "queryParam") {
          this.getList();
        }
      }
    },
    dialogAdd() {
      this.editName = "新增";
      this.dialogFieldBox = true;
      this.phoneNumberTips = "";
      this.doctor = this.resetFormData();
    },
    // 编辑按钮打开编辑字段弹窗
    dialogField(e) {
      this.$https.get("doctor/doctorDetail", { id: e.id }).then(res => {
        this.editName = "编辑";
        this.dialogFieldBox = true;
        let data = res.data.data;
        this.doctor = {
          id: data.id,
          name: data.name,
          sex: data.sex,
          birthday: data.birthday,
          phoneNumber: data.phoneNumber,
          imageUrl: data.imageUrl,
          memo: data.memo,
          hospitialId: data.hospitialId,
          postId: data.postId,
          departmentId: data.departmentId,
          price: data.price,
          distributeFeeRule: data.distributeFeeRule,
          replyFeeRule: data.replyFeeRule,
          password: null,
          skillSubjectIds: data.skillSubjectIds,
          goodAt:data.goodAt,
        };
        this.phoneNumberTips = "";
      });
    },
    // 确认保存
    confirmClick() {
      const vm = this;
      let param = { ...this.doctor };
      this.$refs.form.validate(valid => {
        if (valid) {
          let reqUel = this.doctor.id
            ? "/doctor/updateDoctor"
            : "/doctor/addDoctor";
          postJson(reqUel, param).then(res => {
            this.$message({ message: "操作成功", type: "success" });
            this.dialogFieldBox = false;
            this.getList();
            this.doctor = this.resetFormData();
          });
        } else {
          return false;
        }
      });
    },
    cancelClick() {
      this.dialogFieldBox = false;
      this.$refs.form.clearValidate();
      this.doctor = this.resetFormData();
    },
    setUrl(url) {
      this.doctor.imageUrl = url;
    },
    dialogIncomeFlowOpen(row) {
      this.dialogIncomeFlow = true;
      this.id = row.id;
      this.$refs.incomeFlow.initIncomeFlow(row.id, "doctor");
    },
    recommenderDialog(row) {
      this.$refs.recommender.initRecommender(row.id,"doctor");
      this.recommenderVisable = true;
      // this.idRecommender = row.id;
    },
    getUserByPhoneNum(phoneNumber) {
      this.$https
        .get("doctor/getUserByPhoneNum", {
          id: this.doctor.id,
          phoneNum: this.doctor.phoneNumber
        })
        .then(res => {
          console.log("111111" + res.data.code);
          if (res.data.data && res.data.data.cname) {
            if (!this.doctor.id) {
              this.$alert(
                "将自动绑定已有系统用户" + res.data.data.cname,
                "提示",
                {
                  confirmButtonText: "确定",
                  callback: action => {}
                }
              );
              this.phoneNumberTips = "将自动绑定系统用户" + res.data.data.cname;
            }
          } else if (res.data.code !== 200) {
            this.phoneNumberTips = "此手机号已有医生使用！";
          }
        });
    },
    hot(row) {
      this.$https
        .postXform("doctor/hot", { id: row.id, isHot: !row.isHot })
        .then(res => {
          this.$message({ message: "操作成功", type: "success" });
          row.isHot = !row.isHot;
        });
    }
  }
};
</script>

<style lang="less"></style>
